<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教学管理系统-教师管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        primary: "#165DFF",
                        secondary: "#36CFC9",
                        success: "#52C41A",
                        warning: "#FAAD14",
                        danger: "#FF4D4F",
                        info: "#8C8C8C",
                        "bg-light": "#F5F7FA",
                        "bg-dark": "#1D2129",
                    },
                    fontFamily: {
                        inter: ["Inter", "system-ui", "sans-serif"],
                    },
                    boxShadow: {
                        card: "0 4px 20px rgba(0, 0, 0, 0.08)",
                        "card-hover": "0 8px 30px rgba(0, 0, 0, 0.12)",
                        nav: "0 4px 20px rgba(0, 0, 0, 0.05)",
                    },
                    animation: {
                        gradient: "gradient 6s linear infinite",
                        float: "float 6s ease-in-out infinite",
                        "fade-in": "fadeIn 0.3s ease-in-out",
                        "slide-up": "slideUp 0.3s ease-out",
                        "slide-down": "slideDown 0.3s ease-out",
                    },
                    backgroundImage: {
                        "gradient-primary":
                            "linear-gradient(45deg, var(--tw-gradient-from), var(--tw-gradient-to))",
                    },
                },
            },
        };
    </script>

    <style type="text/tailwindcss">
        @layer utilities {


            .animate-fade-in {
                animation: fadeIn 0.3s ease-in-out;
            }

            .animate-slide-up {
                animation: slideUp 0.3s ease-out;
            }

        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }

            100% {
                transform: translateY(0px);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes slideDown {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
    </style>
</head>

<body class="font-inter bg-bg-light dark:bg-bg-dark transition-colors duration-300">
<div id="app">
    <!-- 导航栏 -->
    <navigation></navigation>

    <!-- 侧边栏 -->
    <sidebar></sidebar>

    <!-- 遮罩层 -->
    <div id="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-30 hidden lg:hidden"></div>

    <!-- 主内容区 -->
    <main class="pt-16 lg:pl-64 min-h-screen">
        <div class="container mx-auto px-6 py-8">
            <div class="animate-fade-in">
                <!-- 页面标题和添加按钮 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 mb-6 shadow-card">
                    <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                        <div>
                            <h2 class="text-2xl font-bold text-gray-800 dark:text-white">信息学院教师管理</h2>
                            <p class="text-gray-600 dark:text-gray-400 mt-1">管理信息学院所有教师信息</p>
                        </div>
                        <button @click="openAddTeacherModal"
                                class="mt-4 md:mt-0 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center">
                            <i class="fa fa-plus mr-2"></i>添加教师
                        </button>
                    </div>
                </div>

                <!-- 搜索 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 mb-6 shadow-card">
                    <div class="flex">
                        <input type="text" v-model="kw" placeholder="搜索教师姓名、工号或职称..."
                               class="flex-1 px-4 py-2 rounded-l-lg border border-gray-300 focus:outline-none ">
                        <button @click="search"
                                class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-r-lg transition-colors">
                            <i class="fa fa-search mr-2"></i>搜索
                        </button>
                    </div>
                </div>

                <!-- 教师列表 -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-card overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                            <tr class="bg-gray-50 dark:bg-gray-700">
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                    姓名
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                    工号
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                    性别
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                    职称
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                    部门
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                    联系方式
                                </th>
                                <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                            <!-- 添加条件判断 -->
                            <tr v-if="teachers.length === 0">
                                <td colspan="7"
                                    class="px-4 py-4 text-center text-gray-500 dark:text-gray-400">未找到数据
                                </td>
                            </tr>
                            <tr v-for="teacher in teachers" :key="teacher.id"
                                class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer"
                                @click="viewTeacher(teacher)">
                                <td class="px-4 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div
                                                class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-2">
                                            <i class="fa fa-user"></i>
                                        </div>
                                        <span class="font-medium">{{ teacher.name }}</span>
                                    </div>
                                </td>
                                <td class="px-4 py-4 whitespace-nowrap">{{ teacher.teacher_id }}</td>
                                <td class="px-4 py-4 whitespace-nowrap">
                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium"
                                                  :class="{
                                                    'bg-blue-100 text-blue-800': teacher.gender === '男',
                                                    'bg-pink-100 text-pink-800': teacher.gender === '女'
                                                }">
                                                {{ teacher.gender }}
                                            </span>
                                </td>
                                <td class="px-4 py-4 whitespace-nowrap">{{ teacher.title }}</td>
                                <td class="px-4 py-4 whitespace-nowrap">{{
                                        teacher.department_name
                                    }}
                                </td>
                                <td class="px-4 py-4 whitespace-nowrap">{{ teacher.phone }}
                                </td>
                                <td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <div class="flex justify-end space-x-2">
                                        <button @click.stop="editTeacher(teacher.id)"
                                                class="p-1 rounded text-primary hover:bg-primary/10" title="编辑">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                        <button @click.stop="deleteTeacher(teacher.id)"
                                                class="p-1 rounded text-danger hover:bg-danger/10" title="删除">
                                            <i class="fa fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
                        <!-- 仅在有数据时显示分页 -->
                        <div v-if="teachers.length > 0"
                             class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                            <div>
                                <p class="text-sm text-gray-700 dark:text-gray-300">
                                    显示第 <span class="font-medium">{{ (currentPage - 1) * pageSize + 1 }}</span> 到
                                    <span class="font-medium">{{
                                            Math.min(currentPage * pageSize, totalItems)
                                        }}</span>
                                    条，共 <span class="font-medium">{{ totalItems }}</span> 条记录
                                </p>
                            </div>
                            <div>
                                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                                     aria-label="Pagination">
                                    <button
                                            @click="prevPage"
                                            :disabled="currentPage === 1"
                                            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"
                                    >
                                        <span class="sr-only">上一页</span>
                                        <i class="fa fa-chevron-left text-xs"></i>
                                    </button>

                                    <button
                                            v-for="page in totalPages"
                                            :key="page"
                                            @click="currentPage = page; fetchTeachers()"
                                            :class="{
                            'z-10 bg-primary text-white border-primary': currentPage === page,
                            'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-600': page !== currentPage
                        }"
                                            class="relative inline-flex items-center px-4 py-2 border text-sm font-medium"
                                    >
                                        {{ page }}
                                    </button>

                                    <button
                                            @click="nextPage"
                                            :disabled="currentPage === totalPages"
                                            class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white dark:bg-gray-700 dark:border-gray-600 text-sm font-medium text-gray-500 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600"
                                    >
                                        <span class="sr-only">下一页</span>
                                        <i class="fa fa-chevron-right text-xs"></i>
                                    </button>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 添加/编辑教师模态框 -->
    <transition name="fade">
        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" v-if="isModalOpen"
             @click.self="closeModal">
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md animate-slide-up">
                <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 p-6">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-white">{{
                            isEditMode ? '编辑教师信息' : '添加新教师'
                        }}</h3>
                    <button @click="closeModal"
                            class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
                        <i class="fa fa-times"></i>
                    </button>
                </div>

                <form @submit.prevent="saveTeacher">
                    <div class="p-6 space-y-4 max-h-[70vh] overflow-y-auto">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">姓名<span
                                        class="text-danger">*</span></label>
                                <input type="text" v-model="formData.name"
                                       class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:text-white"
                                       required
                                       :disabled="isEditMode">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">工号<span
                                        class="text-danger">*</span></label>
                                <input type="text" v-model="formData.teacher_id"
                                       class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:text-white"
                                       required
                                  :disabled="isEditMode">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">性别<span
                                        class="text-danger">*</span></label>
                                <select v-model="formData.gender"
                                        class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:text-white"
                                        required
                                  :disabled="isEditMode">
                                    <option value="">请选择</option>
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">职称<span
                                        class="text-danger">*</span></label>
                                <select v-model="formData.title"
                                        class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:text-white"
                                        required>
                                    <option value="">请选择</option>
                                    <option v-for="item in titles" :value="item.name">{{
                                            item.name
                                        }}
                                    </option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">部门<span
                                        class="text-danger">*</span></label>
                                <select v-model="formData.department_id"
                                        class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:text-white"
                                        required>
                                    <option value="">请选择</option>
                                    <option v-for="item in departments" :value="item.id">{{
                                            item.name
                                        }}
                                    </option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">联系方式<span
                                        class="text-danger">*</span></label>
                                <input type="tel" v-model="formData.phone"
                                       class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary/50 dark:bg-gray-700 dark:text-white"
                                       required>
                            </div>
                        </div>
                    </div>

                    <div class="p-6 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
                        <button type="button" @click="closeModal"
                                class="px-4 py-2 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
                            取消
                        </button>
                        <button type="submit"
                                class="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors flex items-center justify-center"
                                :disabled="isSaving">
                                <span v-if="isSaving">
                                    <i class="fa fa-spinner fa-spin mr-2"></i>保存中...
                                </span>
                            <span v-else>
                                    {{ isEditMode ? '保存' : '添加' }}
                                </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </transition>

    <!-- 查看教师详情模态框 -->
    <transition name="fade">
        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" v-if="isViewModalOpen"
             @click.self="closeViewModal">
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md animate-slide-up">
                <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 p-6">
                    <h3 class="text-xl font-bold text-gray-800 dark:text-white">教师详情</h3>
                    <button @click="closeViewModal"
                            class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
                        <i class="fa fa-times"></i>
                    </button>
                </div>

                <div class="p-6">
                    <div class="flex items-center mb-6">
                        <div
                                class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary text-2xl mr-4">
                            <i class="fa fa-user"></i>
                        </div>
                        <div>
                            <h4 class="text-xl font-bold text-gray-800 dark:text-white">{{ viewTeacherData.name }}</h4>
                            <p class="text-gray-600 dark:text-gray-400">{{ viewTeacherData.teacher_id }}</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">性别</p>
                            <p class="font-medium">{{ viewTeacherData.gender }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">职称</p>
                            <p class="font-medium">{{ viewTeacherData.title }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">部门</p>
                            <p class="font-medium">{{ viewTeacherData.department_name }}</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">联系方式</p>
                            <p class="font-medium">{{ viewTeacherData.phone }}</p>
                        </div>
                    </div>
                </div>

                <div class="p-6 border-t border-gray-200 dark:border-gray-700 flex justify-end">
                    <button @click="closeViewModal"
                            class="px-4 py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </transition>

    <!-- 确认删除模态框 -->
    <transition name="fade">
        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" v-if="isDeleteModalOpen"
             @click.self="closeDeleteModal">
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl w-full max-w-md animate-slide-up">
                <div class="text-center p-6">
                    <div
                            class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30 mb-4">
                        <i class="fa fa-exclamation-triangle text-xl text-red-600 dark:text-red-400"></i>
                    </div>
                    <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">确认删除</h3>
                    <p class="text-gray-500 dark:text-gray-400 mb-6">
                        您确定要删除教师 "{{ deleteTeacherName }}" 吗？
                        此操作不可撤销。
                    </p>
                </div>

                <div class="p-6 border-t border-gray-200 dark:border-gray-700 flex justify-center space-x-3">
                    <button @click="closeDeleteModal"
                            class="px-4 py-2 rounded-lg bg-gray-200 text-gray-700 hover:bg-gray-300 transition-colors dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
                        取消
                    </button>
                    <button @click="confirmDelete"
                            class="px-4 py-2 rounded-lg bg-danger text-white hover:bg-danger/90 transition-colors flex items-center justify-center"
                            :disabled="isDeleting">
                            <span v-if="isDeleting">
                                <i class="fa fa-spinner fa-spin mr-2"></i>删除中...
                            </span>
                        <span v-else>
                                确认删除
                            </span>
                    </button>
                </div>
            </div>
        </div>
    </transition>
</div>
<script src="/static/js/top.js"></script>
<script src="/static/js/aside.js"></script>
<script src="/static/js/message.js"></script>
<script src="/static/js/axios.min.js"></script>
<script src="/static/js/common.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            // 搜索
            kw: '',

            // 分页
            currentPage: 1,
            pageSize: 10,
            totalItems: 0, // 总教师数
            totalPages: 0, // 总页数

            // 模态框状态
            isModalOpen: false,
            isEditMode: false,
            isViewModalOpen: false,
            isDeleteModalOpen: false,
            isSaving: false,
            isDeleting: false,
            deleteTeacherId: null,
            deleteTeacherName: '',

            // 表单数据
            formData: {
                id: null,
                name: '',
                teacher_id: '',
                gender: '',
                title: '',
                department_id: '',
                department_name: '',
                phone: ''
            },

            // 查看教师数据
            viewTeacherData: {
                id: null,
                name: '',
                teacher_id: '',
                gender: '',
                title: '',
                department_id: '',
                department_name: '',
                phone: ''
            },
            // 部门数据
            departments: [
                {id: 1, name: '信息学院'}
            ],

            //职称数据
            titles: [
                {id: 1, name: '教授'},
                {id: 2, name: '副教授'},
                {id: 3, name: '讲师'},
                {id: 4, name: '辅导员'}
            ],

            // 教师数据
            teachers: []
        },
        mounted() {
            this.fetchTeachers();
        },
        methods: {
            // 获取教师列表
            fetchTeachers() {
                axios.get('/teachers', {
                    params: {
                        page: this.currentPage,
                        page_size: this.pageSize,
                        kw: this.kw
                    }
                })
                    .then(response => {
                        this.teachers = response.data;
                        this.currentPage = response.pagination.current_page;
                        this.pageSize = response.pagination.page_size;
                        this.totalPages = response.pagination.total_pages;
                        this.totalItems = response.pagination.total_items; // 正确获取总数据量
                    })
                    .catch(error => {
                        console.error('获取教师列表失败', error);
                    });
            },

            // 搜索教师
            search() {
                this.currentPage = 1;
                this.fetchTeachers();
            },

            // 打开添加教师模态框
            openAddTeacherModal() {
                this.isEditMode = false;
                this.formData = {
                    id: null,
                    name: '',
                    teacher_id: '',
                    gender: '',
                    title: '',
                    department_id: '',
                    department_name: '',
                    phone: ''
                };
                this.isModalOpen = true;
            },

            // 打开编辑教师模态框
            editTeacher(id) {
                const teacher = this.teachers.find(t => t.id === id);
                if (teacher) {
                    this.isEditMode = true;
                    this.formData = {...teacher};
                    this.isModalOpen = true;
                }
            },

            // 保存教师信息
            saveTeacher() {
                this.isSaving = true;
                if (this.isEditMode) {
                    // 编辑教师信息
                    axios.put(`/teachers/${this.formData.id}`, this.formData)
                        .then(response => {
                            message.success(response.message)
                            this.isSaving = false;
                            this.closeModal();
                            this.fetchTeachers();
                        })
                        .catch(error => {
                            console.error('更新教师信息失败', error);
                            this.isSaving = false;
                        });
                } else {
                    // 添加新教师
                    axios.post('/teachers', this.formData)
                        .then(response => {
                            message.success(response.message)
                            this.isSaving = false;
                            this.closeModal();
                            this.fetchTeachers();
                        })
                        .catch(error => {
                            console.error('添加教师失败', error);
                            this.isSaving = false;
                        });
                }
            },

            // 关闭模态框
            closeModal() {
                this.isModalOpen = false;
            },

            // 查看教师详情
            viewTeacher(teacher) {
                this.viewTeacherData = {...teacher};
                this.isViewModalOpen = true;
            },

            // 关闭查看模态框
            closeViewModal() {
                this.isViewModalOpen = false;
            },

            // 打开确认删除模态框
            deleteTeacher(id) {
                const teacher = this.teachers.find(t => t.id === id)
                if (teacher) {
                    this.deleteTeacherId = id;
                    this.deleteTeacherName = teacher.name;
                    this.isDeleteModalOpen = true;
                }
            },

            // 确认删除
            confirmDelete() {
                this.isDeleting = true;
                axios.delete(`/teachers/${this.deleteTeacherId}`)
                    .then(response => {
                        message.success(response.message)
                        this.isDeleting = false;
                        this.isDeleteModalOpen = false;
                        this.fetchTeachers();
                    })
                    .catch(error => {
                        console.error('删除教师失败', error);
                        this.isDeleting = false;
                    });
            },

            // 关闭确认删除模态框
            closeDeleteModal() {
                this.isDeleteModalOpen = false;
            },

            // 上一页
            prevPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                    this.fetchTeachers();
                }
            },

            // 下一页
            nextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                    this.fetchTeachers();
                }
            }
        }
    });
</script>
</body>
</html>